<template>
  <BasicContainer>
    <ElTabs v-model="activeName" @tab-click="handleClick">
      <ElTabPane label="请假表单" name="first">
        <ElForm
          ref="dataForm"
          :model="dataForm"
          :rules="dataRule"
          label-width="80px"
          @keyup.enter.native="dataFormSubmit()">
          <ElFormItem label="类型" prop="type">
            <ElRadioGroup v-model="dataForm.type">
              <ElRadioButton label="1">调体</ElRadioButton>
              <ElRadioButton label="2">事假</ElRadioButton>
              <ElRadioButton label="3">年假</ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>

          <ElFormItem label="开始时间" prop="startTime">
            <ElDatePicker
              v-model="dataForm.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="开始时间" />
          </ElFormItem>

          <ElFormItem label="结束时间" prop="endTime">
            <ElDatePicker
              v-model="dataForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="结束时间" />
          </ElFormItem>
          <ElFormItem
            label="请假天数"
            prop="days"
            :rules="[
              { required: true, message: '请假天数不能为空' },
              { type: 'number', message: '请假天数必须为数字值' }
            ]">
            <ElInput v-model.number="dataForm.days" type="age" autocomplete="off" />
          </ElFormItem>
          <ElFormItem label="说明" prop="note">
            <ElInput v-model="dataForm.note" type="textarea" rows="3" placeholder="说明" />
          </ElFormItem>
          <ElButton @click="resetForm('dataForm')">重置</ElButton>
          <ElButton v-if="canSubmit" type="primary" @click="dataFormSubmit()">确定</ElButton>

          <!-- 提取功能 -->
          <FlowableHandleDraw ref="flowableHandleDraw" :prop-params="queryObj" />
        </ElForm>
      </ElTabPane>
      <ElTabPane label="办理意见" name="second">
        <ApprovalCommentRecord ref="approvalCommentRecord" :process-instance-id="queryObj.procInstId" />
      </ElTabPane>
      <ElTabPane label="流程图" name="third">
        <!-- 流程图 -->
        <FlowProgressView
          ref="bpmnPreviewView"
          :visible.sync="visiblePreview"
          model-key="leave"
          :proc-inst-id="queryObj.procInstId" />
      </ElTabPane>
    </ElTabs>
  </BasicContainer>
</template>

<script>
  import { getObj, addObj, putObj } from '@/api/admin/leave'
  import ApprovalCommentRecord from '@/module/process/components/ApprovalCommentRecord'
  import FlowableHandleDraw from '@/module/process/components/FlowableHandleDraw'

  export default {
    name: 'LeaveFormRead',
    components: { ApprovalCommentRecord, FlowableHandleDraw },
    data() {
      return {
        visible: false,
        canSubmit: true,
        dataForm: {
          id: 0,
          processInstanceId: '',
          applyerCode: '',
          title: '',
          type: '2',
          days: 3,
          startTime: '2022-06-22 16:04:33',
          endTime: '2022-06-25 16:04:33',
          companyId: '',
          companyName: '',
          deptId: '',
          deptName: '',
          note: 'test',
          createTime: '',
          creator: '',
          updateTime: '',
          updator: '',
          status: 0
        },
        dataRule: {
          type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
          startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
          endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
          note: [{ required: true, message: '说明不能为空', trigger: 'blur' }]
        },
        activeName: 'first',
        visiblePreview: true,
        queryObj: {},
        loadBpmnPreviewing: true
      }
    },
    created() {
      this.queryObj = this.$route.params
      if (!this.$isBlank(this.queryObj.businessKey)) {
        this.init(this.queryObj.businessKey)
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.canSubmit = true
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.canSubmit = false
            if (this.dataForm.id) {
              putObj(this.dataForm)
                .then(data => {
                  this.$notify.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                })
                .catch(() => {
                  this.canSubmit = true
                })
            } else {
              addObj(this.dataForm)
                .then(data => {
                  this.$notify.success('添加成功')
                  // 关闭当前tag
                  this.$closeTab()
                  const leaveObj = data.data.data
                  this.$router.push({
                    path: '/leave/leaveFrom/edit',
                    query: {
                      formId: leaveObj.id,
                      procInstId: leaveObj.processInstanceId,
                      modelKey: 'leave'
                    }
                  })
                  // this.$router.go(-1)
                  this.$emit('refreshDataList')
                })
                .catch(() => {
                  this.canSubmit = true
                })
            }
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      handleClick(tab, event) {
        this.activeName = tab.name
        // 加载流程显示
        if (tab.name === 'third' && this.loadBpmnPreviewing) {
          this.loadBpmnPreviewing = false
          setTimeout(() => {
            this.$refs.bpmnPreviewView.init(this.queryObj.modelKey, this.queryObj.procInstId)
          }, 200)
        }
      }
    }
  }
</script>
